/* Todo: Size in rem for other resolutions */

/** CONTAINER **/

.propertytree {
	color: white;
	font-family: arial;
	min-width: 300px;
}



/** GROUP **/

/* Clear list defaults */
.propertytree ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Left margin for tree structure */
.propertygroup ul {
	margin-left: 20px;
}



/** PROPERTY **/

.property {
	display: flex;
	align-items: center;
	width: 100%;
	height: 38px;
}

.property p {
	margin: 0px;
}

/* Selected */
.property:is(:hover,:focus,:active) {
	background: linear-gradient(90deg, #F0F0F0, #C4C4C4);
}

.property:is(:hover,:focus,:active) > :is(.collapse-icon,.styled-checkbox) {
	filter: invert(1);
}

.property:is(:hover,:focus,:active) > p {
	color: black;
}



/** ICONS **/

/* Blip preview */
.preview-icon {
	position: absolute;
	right: 10px;
}

.preview-icon > svg {
	width: 30px;
	height: 30px;
}

/* Collapse arrow */
.collapse-icon {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	background-image: url(/icons/collapse.svg);
	cursor: pointer;
	transition: transform 0.3s;
}

@media (prefers-reduced-animation) {
	.collapse-icon {
		transition: transform 0s;
	}
}

.collapse-icon.collapsed {
	transform: rotateX(-180deg);
}



/** CHECKBOX **/

/* Hide real checkbox */
.property input {
	display: none;
}

/* Checkbox background */
.property .styled-checkbox {
	width: 18px;
	height: 18px;
	margin: 0px 10px;
	cursor: pointer;
	background-color: white;
}

/* Checkbox content */
.property input:checked + .styled-checkbox {
	background-image: url(/icons/check-true.svg);
}

.property input:indeterminate + .styled-checkbox {
	background-image: url(/icons/check-mixed.svg);
}